<template>
  <div class="hello"style="background: #42c5a5;">
    <div class="boxes">
			<div class="boxes_logo">
				<img src="../assets/images/logo_icon.png"/>
			</div>
			<div class="form_login">
				<!--手机号登陆-->
				<form v-if="loginType===1">
					<div class="form_iphone">
						<label>手机号</label>
						<input class="iphone_pla" type="text" placeholder="请输入手机号" maxlength="11"/>
						<a href="javascirpt:;">获取验证码</a>
					</div>
					<div class="form_yzm">
						<label>验证码</label>
						<input class="iphone_pla" type="text" placeholder="请输入验证码"/>
					</div>
					<div class="form_lg">
						<router-link to="/Index">
							<button>登录</button>
						</router-link>
					</div>
					<div class="form_or"></div>
					<div class="shortcut">
						<a href="javascript:;" @click="loginTypeTab(2)">密码登录</a>
					</div>
				</form>
				<!--账号登陆-->
				<form v-else>
					<div class="form_yhm">
						<label>用户名</label>
						<input class="iphone_pla" type="text" placeholder="请输入用户名" maxlength="11"/>
					</div>
					<div class="form_mm">
						<label>密码</label>
						<input class="iphone_pla" type="text" placeholder="请输入密码"/>
					</div>
					<div class="form_lg">
						<router-link to="/Index">
							<button>登录</button>
						</router-link>
					</div>
					<div class="form_or"></div>
					<div class="shortcut">
						<a href="javascript:;" @click="loginTypeTab(1)">手机登录</a>
					</div>
				</form>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      loginType:1,//1手机登陆 2密码登陆
    }
  },
  methods:{
  	loginTypeTab(type){
  		this.loginType=type;
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
